@import url('./font.css');
*{
    vertical-align: top;
}
body{
    overflow-y: hidden;
}
#wrapper{
    height: 100vh;
}
/*导航栏样式*/
#wrapper .navbar{
    height: 44px;
    background-color: #516384;
    text-align: center;
    font-size: 18px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}
#wrapper .navbar a{
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: #FFFFFF;
    padding: 2px 5px;
    background-color: #fc5c62;
    border-radius: 2px;
}
/*内容栏样式*/
#wrapper #content{
    height: calc( 100% - 96px);
}
/*内容部分样式*/
.side-bar{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 28%;
    height: 100%;
    float: left;
    overflow: scroll;
    z-index: 10;
    background-color: #dfdfdf;
}
/*侧栏按钮样式*/
.side-bar a.button{
    width: 100%;
    height: 48px;
    line-height: 48px;
    border: none;
    display: inline-block;
    text-align: center;
    border-bottom: 1px dotted #c0c0c0;
    font-size: 14px;
    color: #5a5a5a;
}
.side-bar a.button.active{
    background-color: #ffffff;
    color: #fc5c62
}
/*侧栏样式*/
.side-content{
    display: inline-block;
    float: left;
    z-index: 20;
    width: 72%;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.side-content .nav{
    padding: 1px 5px;
    height: 30px;
    line-height: 30px;
    background-color: #F7F7F7;
}
/*app栏样式*/
.app-item{
    padding: 10px 5px;
    border-bottom: 1px dotted #e7e7e7;
    background-color: #FFFFFF;
    overflow: hidden;
}
.app-item.yellow{
    background-color: #fffff2;
}
.app-item>img{
    width: 6rem;
}
.app-item .app-detail{
    display: inline-block;
}
.app-item .app-detail>.app-name{
    font-size: 1.5rem;
    color: #5a5a5a;
    margin-bottom: 1rem;
}
.app-item .app-detail>.cpm{
    font-size: 16px;
    color: #fc5c62;
}
.app-item .app-detail>span{
    font-size: 12px;
    color: #da7f7f;
}
.app-item>.app-buy{
    border: none;
    vertical-align: bottom;
    font-size: 1.4rem;
    padding: 1px 5px;
    color: #516384;
    background-color: #FFFFFF;
    border: 1px solid #516384;
    border-radius: 6px;
    float: right;
    position: relative;
    top: 3.5rem;
}
/*投放量数字样式*/
.app-buy.full:after{
    content: attr(data-attr);
    position:absolute;
    font-size: 12px;
    border-radius: 5px;
    display: inline-block;
    background-color: red;
    color: #FFFFFF;
    padding: 1px 3px;
    right: 0;
    top: -12px;
}
/*底部购物篮样式*/
.toolbar.top{
    z-index: 10001;
    position: absolute;
    width: 100%;
    background-color: #FFFFFF;
    height: 44px;
}
.toolbar.top:after{
    content: '';
    display: block;
    clear: both;
}
.toolbar .toolbar-inner{
    z-index: 100;
    position: absolute;
    width: 100%;
    background-color: #FFFFFF;
    border-top: 1px solid #c9c9c9;
}
.toolbar .shopcart{
    display: inline-block;
    position: relative;
    margin-left: 8px;
    top: -8px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    border-radius: 20px;
    text-align: center;
    z-index: 500;
    background-color: #516384;
    color: #ffffff;
}
.toolbar .m-gouwu:before{
    position: relative;
    display: inline-block;
    line-height: 40px;
    left: -1px;
    top: -1px;
}
.toolbar .shopcart.full::after{
    content: attr(data-attr);
    position:absolute;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px;
    display: inline-block;
    background-color: red;
    right: -6px;
    top: -6px;
}
.toolbar .sales-data{
    display: inline-block;
    margin-left: 10px;
    height: 100%;
}
.toolbar .sales-data>.price{
    display: block;
    margin-top: 4px;
    height: 22px;
    line-height: 22px;
    margin-bottom: 2px;
    font-size: 20px;
    color: #fc5c62;
}
.toolbar .sales-data>span{
    display: inline-block;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    padding-bottom: 2px;
}
.toolbar #pushButton{
    display: inline-block;
    text-align: center;
    float: right;
    width: 120px;
    height: 51px;
    line-height: 51px;
    font-size: 20px;
    color: #ffffff;
    background-color: #fc5c62;
}
.toolbar #pushButton.none,.toolbar .shopcart.none{
    background-color: #aaaaaa;
}
.background{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 10000;
    background-color: rgba(0,0,0,.5);
}
/*投放量交互窗口样式*/
.choose-number{
    position: absolute;
    width: 80%;
    margin: auto;
    left: 0;right: 0;
    top: 25%;
    background-color: #FFFFFF;
    z-index: 10001;
}
.choose-number>.choose-number-title{
     padding: 10px 5px;
     text-align: center;
     font-size: 16px;
     border-bottom: 1px solid #e9e9e9;
    color: #2a2a2a;
 }
 .choose-number>.too-low{
    color: #fc5c62;
    text-align: center;
    margin-top: 5px;
}
.choose-number .img-wrapper{
    padding: 10px 20px;
    font-size: 0px;
}
.choose-number .wrapper-left{
    display: inline-block;
    width: 40%;
    text-align: center;
}
.choose-number img{
    width: 80%;
}
.choose-number .wrapper-left span{
    font-size: 12px;
    display: block;
    margin-top: 3px;
}
.choose-number .wrapper-right{
    display: inline-block;
    font-size: 14px;
    width: 60%;
}
.choose-number .input-number{
    margin: 5px 0 5px 0;
}
.choose-number .min-push{
    margin: 5px 0 10px 0;
    color: #8a8a8a;
}
.choose-number .min-push-num{
    vertical-align: baseline;
}
.choose-number .input-number input{
    padding: 2px 4px;
    width: 35%;
    vertical-align: middle;
    border: 1px solid #e9e9e9;
    -webkit-user-select:text;
}
.choose-number .tool-btn{
    border-top: 1px solid #e9e9e9;
}
.choose-number .tool-btn button{
    width: 50%;
    background-color: #FFFFFF;
    border: none;
    font-size: 14px;
    padding: 10px 0;

}
.choose-number .tool-btn .yes{
    border-right: 1px solid #e9e9e9;
    color: #fc5c62;
}
/*确认投放交互窗口样式*/
.choose-days{
    position: absolute;
    width: 80%;
    margin: auto;
    left: 0;right: 0;
    top: 25%;
    background-color: #FFFFFF;
    z-index: 10001;
}
.choose-days .choose-days-title{
    padding: 10px 5px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #e9e9e9;
    color: #2a2a2a;
}
.choose-days .time-btn{
    border-bottom: 1px solid #e9e9e9;
    padding: 5px 0;
}

.choose-days .time-btn button{
    display: block;
    width: 40%;
    margin: 5px auto;
    border: none;
    background-color: #f5f5f5;
    color: #5a5a5a;
    padding: 5px 0;
    border-radius: 5px;
}
.choose-days .time-btn button.selected{
    background-color: #fc5c62;
    color: #FFFFFF;
}
.choose-days .tool-btn button{
    width: 50%;
    background-color: #FFFFFF;
    border: none;
    font-size: 14px;
    padding: 10px 0;

}
.choose-days .tool-btn .yes{
    border-right: 1px solid #e9e9e9;
    color: #8a8a8a;
}
.choose-days .tool-btn .yes.red-yes{
    color: #fc5c62;

}
.choose-push{
    position: absolute;
    width: 80%;
    margin: auto;
    left: 0;right: 0;
    top: 25%;
    background-color: #FFFFFF;
    z-index: 10001;
}
.choose-push .choose-push-title{
    padding: 30px 5px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #e9e9e9;
    color: #2a2a2a;
}
.choose-push .tool-btn button{
    width: 50%;
    background-color: #FFFFFF;
    border: none;
    font-size: 14px;
    padding: 10px 0;

}
.choose-push .tool-btn .yes{
    border-right: 1px solid #e9e9e9;
    color: #fc5c62;
}
.go-to-center{
    position: absolute;
    width: 80%;
    margin: auto;
    left: 0;right: 0;
    top: 25%;
    background-color: #FFFFFF;
    z-index: 10001;
}
.go-to-center span{
    padding: 10px 5px;
    text-align: center;
    font-size: 18px;
    display: block;
    border-bottom: 1px solid #e9e9e9;
    color: #2a2a2a;
}
.go-to-center p{
    display: block;
    padding: 20px 40px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #e9e9e9;
}
.go-to-center a{
    display: block;
    color: #fc5c62;
    text-align: center;
    padding: 10px 5px;
}
.display{
    display: none;
}

/*购物车弹出框样式*/
.toolbar .cart-detail{
    position: absolute;
    width: 100%;
    bottom: -100px;
}
.toolbar .cart-detail>p{
    padding: 4px 10px 5px 10px;
    font-size: 14px;
    background-color: #e8e8e8;
    color: #5a5a5a;
}
.toolbar .cart-detail>p>span{
    display: inline-block;
    width: 70%;
    vertical-align: text-bottom;
}
.toolbar .cart-detail p .cart-title-right{
    text-align: right;
    width: 30%;
}
.cart-detail .cart-item-list{
    border-bottom: 1px solid #e9e9e9;
    max-height: 241px;
    overflow-y: scroll;
}
.cart-detail .cart-item-list>.cart-item:first-child{
    display: none;
}
.cart-detail .cart-item-list .cart-item{
    position: relative;
    background-color: #FFFFFF;
    padding: 15px 10px;
    font-size: 0px;
}
.cart-detail .cart-item-list .cart-item>div{
    display: inline-block;
    font-size: 14px;
}
.cart-item .cart-item-content{
    width: 45%;
    height: 50px;
}
.cart-item .cart-item-content .item-name{
    font-size: 16px;
    color: #2a2a2a;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item .cart-item-content .item-name+p{
    color: #5a5a5a;
}
.cart-item .cart-item-price{
    width: 20%;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    color: #fc5c62;
}
.cart-item .input-delete{
    width: 35%;
    height: 50px;
    line-height: 50px;
}
.cart-item .input-delete input{
    width: 60%;
    display: inline;
    text-align: center;
    line-height: normal;
    padding: 5px;
    border: 1px solid #e9e9e9;
    position: relative;
    top: 10px;
    -webkit-user-select:text;
    vertical-align: top;
}
.cart-item span.m-icon{
    font-size: 24px;
    color: #516384;
    position: absolute;
    top: 26px;right: 10px;
}